<template>
    <div class="screen" :style="{background:autoTheme.bgColor}">
        <!-- 头部区域 -->
        <div class="head">
            <p class="title" :style="{color:autoTheme.titleColor}">农业数据实时监控系统</p>
            <img src="../../public/static/img/top02.png" class="logo" />
            <img class="switchThem" :src="autoTheme.img" @click="changeTheme" />
        </div>
        <!-- 图标区域 -->
        <div class="container">
            <div class="left">
                <!-- 横向柱状图 fullscreen crosswise -->
                <div :class="screenStatus.crosswise ? 'fullscreen' : 'crosswise'">
                    <crosswise-comp ref="crosswise"></crosswise-comp>
                    <div class="resize" @click="changeScreen('crosswise')">
                        <!-- icon-compress-alt icon-expand-alt -->
                        <span class="iconfont icon-expand-alt"></span>
                    </div>
                </div>
                <!-- 纵向柱状图 -->
                <div class="vertical">
                    <vertical-comp></vertical-comp>
                    <div class="resize">
                        <span class="iconfont icon-compress-alt"></span>
                    </div>
                </div>
            </div>
            <div class="center">
                <!-- 环状图 -->
                <div class="annular">
                    <huan-comp></huan-comp>
                    <div class="resize">
                        <span class="iconfont icon-compress-alt"></span>
                    </div>
                </div>
                <!-- 地图 -->
                <div class="map">
                    <map-comp></map-comp>
                    <div class="resize">
                        <span class="iconfont icon-compress-alt"></span>
                    </div>
                </div>
            </div>
            <div class="right">
                <!-- 折线图 -->
                <div class="broken">
                    <broken-comp></broken-comp>
                    <div class="resize">
                        <span class="iconfont icon-compress-alt"></span>
                    </div>
                </div>
                <!-- 饼图 -->
                <div class="pie">
                    <pie-comp></pie-comp>
                    <div class="resize">
                        <span class="iconfont icon-compress-alt"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

// 引入6个图表组件
import crosswiseComp from '@/components/crosswiseComp.vue'
import verticalComp from '@/components/verticalComp.vue'
import huanComp from '@/components/huanComp.vue'
import mapComp from '@/components/mapComp.vue'
import brokenComp from '@/components/brokenComp.vue'
import pieComp from '@/components/pieComp.vue'

import { mapState } from 'vuex'
export default {
    components: {
        crosswiseComp,
        verticalComp,
        huanComp,
        mapComp,
        brokenComp,
        pieComp
    },
    computed:{
        ...mapState(['autoTheme'])
    },
    data() {
        return {
            // 初始化图表组件的默认样式状态  
            screenStatus:{
                crosswise:false,
                vertical:false,
                annular:false,
                map:false,
                broken:false,
                pie:false
            }
        };
    },
    methods: {
        // 切换主题
        changeTheme(){
            this.$store.commit('changeThemes')
        },
        // 窗口切换
        changeScreen(type){
            // 同步当前图表容器大小
            this.screenStatus[type] = !this.screenStatus[type]
            // 调用图表的适配方法 改变容器大小的时候会触发回流和重绘制 render渲染树
            // 本次dom渲染完毕后
            this.$nextTick(()=>{
                this.$refs[type].Adaptive()
            })
        }
    },
};
</script>

<style>
/*全屏样式的定义 */
.fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    z-index: 100;
    background: red;
}

/* 大屏容器 */
.screen {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    /* background-image: url("../../public/static/img/bgc01.png"); */
}

/* 标题区域 */
.head {
    flex: 1;
    /* border: 2px solid blue; */
    margin-bottom: 0.1%;
    position: relative;
}

.head .title {
    text-align: center;
    color: #d96720;
    font-weight: bold;
    font-size: 25px;
    margin: 10px 0 0 0;
}

.head .logo {
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
}

.head .switchThem {
    position: absolute;
    right: 4%;
    bottom: 70%;
    color: orange;
    font-size: 14px;
    width: 18px;
}

/* 图标区域 */
.container {
    flex: 8;
    display: flex;
    justify-content: space-around;
}

/* 左侧视图区域 */
.container .left {
    /* flex: 3; */
    /* border: 1px solid red; */
    width: 28%;
    height: 100%;
    margin-left: 0.5%;
    display: flex;
    flex-direction: column;
}

.left .crosswise {
    flex: 3;
    /* border: 1px solid purple; */
    margin-bottom: 8%;
}

.left .vertical {
    flex: 2.5;
    /* border: 1px solid brown; */
}

/* 中间视图区域 */
.container .center {
    /* flex: 5; */
    /* border: 1px solid green; */
    width: 40%;
    height: 100%;
    margin: 0 2%;
    display: flex;
    flex-direction: column;
}

.center .annular {
    flex: 1;
    /* border: 1px solid palegreen; */
    margin-bottom: 3%;
}

.center .map {
    flex: 4;
    width: 100%;
    /* border: 1px solid red; */
}

/* 右侧视图区域 */
.container .right {
    /* flex: 3; */
    /* border: 1px solid orange; */
    width: 28%;
    height: 100%;
    margin-right: 0.5%;
    display: flex;
    flex-direction: column;
}

.right .broken {
    flex: 1;
    /* border: 1px solid palevioletred; */
    margin-bottom: 6%;
}

.right .pie {
    flex: 1;
    /* border: 1px solid olive; */
}

.crosswise,
.vertical,
.annular,
.map,
.broken,
.pie {
    position: relative;
}

/* 缩放标记样式 */
.resize {
    position: absolute;
    right: 16px;
    top: 16px;
    cursor: pointer;
    color: white;
}
</style>
